<template>
  <div style="width: 100%; height: 100%; overflow: visible; ">
    <h3 style="padding: 15px; background-color: #383838; color: #fff; ">问卷说明</h3>
    <a-spin :spinning="loading">
      <div style="padding: 15px; font-size: 16px; line-height: 30px; ">
        {{ description }}
      </div>
    </a-spin>
    <div :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          // borderTop: '1px solid #e9e9e9',
          // padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
      <a-button type="link" block style="height: 40px; background-color: #383838; color: #fff"
                @click="startAssess">开始评估
      </a-button>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: "start-explain",
  data() {
    return {
      loading: false,
      queryParam: {
        id: '',
      },
      description: '',
      url: {
        getInfo: '/question/getInfo'
      }
    }
  },
  watch: {
    $route: {
      handler (to, from) {
        //深度监听，同时也可监听到param参数变化
        this.$nextTick(() => {
          this.queryParam.id = to.query.questionId
          this.queryParam.assessedId = to.query.assessedId
          if (this.queryParam.id) {
            this.getInfo()
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  methods: {
    getInfo() {
      this.loading = true
      getAction(this.url.getInfo + '/' + this.queryParam.id).then(res => {
        this.loading = false
        if (!res.success) {
          return this.$message.error(res.message)
        }
        this.description = res.result.questionDescription
      }).catch(() => {
        this.loading = false
      })
    },
    startAssess () {
      this.$router.push({ path: '/mobile/assessment-answer', query: { questionId: this.queryParam.id, assessedId: this.queryParam.assessedId } })
    }
  },
}
</script>

<style scoped>

</style>
